<template>
  <div class="art">
    <div class="close">
      <router-link to="/chengbao"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav1">
      <router-link to="/chengbao/art1"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav2">
      <router-link to="/chengbao/art2"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav3">
      <router-link to="/chengbao/art3"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang1">
      <router-link v-show="up_link1" to="/chengbao/art1/artup1"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang2">
      <router-link v-show="up_link1" to="/chengbao/art1/artup2"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang3">
      <router-link v-show="up_link1" to="/chengbao/art1/artup3"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang4">
      <router-link v-show="up_link1" to="/chengbao/art1/artup4"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="xia1">
       <router-link v-show="down_link1" to="/chengbao/art1/artdown1"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="xia2">
       <router-link v-show="down_link1" to="/chengbao/art1/artdown2"><button class="btn_go"></button></router-link> 
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="xia3">
       <router-link v-show="down_link1" to="/chengbao/art1/artdown3"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="xia4">
       <router-link v-show="down_link1" to="/chengbao/art1/artdown4"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
  </div>
</template>

<script>
export default {
  name: 'read',
  data () {
    return {
      up_link1: false,
      up_link2: true,
      down_link1: false,
      down_link2: true
    }
  },
  created () {
    console.log(this.$store.state.jurisdiction)
    if (this.$store.state.jurisdiction === 0) {
      alert('校验文件无效!')
    } else if (this.$store.state.jurisdiction === 1) {
      this.up_link1 = true
      this.up_link2 = false
    } else if (this.$store.state.jurisdiction === 2) {
      this.down_link1 = true
      this.down_link2 = false
    } else if (this.$store.state.jurisdiction === 3) {
      this.up_link1 = true
      this.up_link2 = false
      this.down_link1 = true
      this.down_link2 = false
    }
  },
  methods: {
    warntext: function () {
      alert('暂未开放！')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn_go{
  width:100%;
  height:100%;
  opacity: 0;
}
.art{
  background:url(../../assets/meishu/1.0/1-assets/meishubg_1.png);
  width:1280px;
  height:720px;
  position: relative;
  text-align: center;
  margin:0 auto;
}
.close{
  background:url(../../assets/meishu/1.0/1-assets/close.png) no-repeat;
  width:58px;
  height:55px;
  position: absolute;
  top:30px;
  right:20px;
  z-index: 999;
}
.nav1{
  background:url(../../assets/meishu/1.0/1-assets/grade1.png) no-repeat;
  width:210px;
  height:130px;
  position: absolute;
  top:30px;
  left:130px;
}
.nav2{
  background:url(../../assets/meishu/1.0/1-assets/grade2_on.png) no-repeat;
  width:180px;
  height:100px;
  position: absolute;
  top:100px;
  left:610px;
}
.nav3{
  background:url(../../assets/meishu/1.0/1-assets/grade3_on.png) no-repeat;
  width:250px;
  height:130px;
  position: absolute;
  top:58px;
  right:55px;
}
.shang1{
  background:url(../../assets/meishu/1.0/1-assets/1.png) no-repeat;
  width:70px;
  height:150px;
  position: absolute;
  top:150px;
  left:80px;
}
.shang2{
  background:url(../../assets/meishu/1.0/1-assets/2.png) no-repeat;
  width:130px;
  height:150px;
  position: absolute;
  top:145px;
  left:170px;
}
.shang3{
  background:url(../../assets/meishu/1.0/1-assets/3.png) no-repeat;
  width:130px;
  height:150px;
  position: absolute;
  top:175px;
  left:320px;
}
.shang4{
  background:url(../../assets/meishu/1.0/1-assets/4.png) no-repeat;
  width:130px;
  height:178px;
  position: absolute;
  top:125px;
  left:458px;
}
.xia1{
  background:url(../../assets/meishu/1.0/1-assets/i1.png) no-repeat;
  width:110px;
  height:168px;
  position: absolute;
  bottom:73px;
  right:500px;
}
.xia2{
  background:url(../../assets/meishu/1.0/1-assets/i2.png) no-repeat;
  width:120px;
  height:168px;
  position: absolute;
  bottom:85px;
  right:390px;
}
.xia3{
  background:url(../../assets/meishu/1.0/1-assets/i3.png) no-repeat;
  width:120px;
  height:148px;
  position: absolute;
  bottom:78px;
  right:243px;
}
.xia4{
  background:url(../../assets/meishu/1.0/1-assets/i4.png) no-repeat;
  width:130px;
  height:200px;
  position: absolute;
  bottom:75px;
  right:90px;
}
</style>
